<template>
  <page-meta :page-style="$theme.pageStyle">
    <!-- #ifndef H5 -->
    <navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
    <!-- #endif -->
  </page-meta>

  <page-bg></page-bg>
  <u-navbar :safeAreaInsetTop="false" :placeholder="false" :is-back="true" :is-fixed="true" :title="$theme.title"
    :border-bottom="false" :title-bold="true" :title-color="'#111111'" :background="{ background: navBg }">
  </u-navbar>

  <view class="register min-h-full flex flex-col items-center px-[40rpx] pt-[100rpx] box-border">
    <view class="w-full">
      <view class="text-2xl font-medium mb-[60rpx]">忘记密码</view>
      <u-form borderBottom :label-width="150">
        <u-form-item label="手机号" borderBottom>
          <u-input class="flex-1" v-model="formData.mobile" :border="false" placeholder="请输入手机号码" />
        </u-form-item>
        <u-form-item label="验证码" borderBottom>
          <u-input class="flex-1" v-model="formData.code" placeholder="请输入验证码" :border="false" />
          <view class="border-l border-solid border-0 border-light pl-3 text-muted leading-4 ml-3 w-[180rpx]"
            @click="sendSms">
            <u-verification-code ref="uCodeRef" :seconds="60" @change="codeChange" change-text="x秒" />
            <text :class="formData.mobile ? 'text-primary' : 'text-muted'">
              {{ codeTips }}
            </text>
          </view>
        </u-form-item>
        <u-form-item label="新密码" borderBottom>
          <u-input class="flex-1" type="password" v-model="formData.password" placeholder="6-20位数字+字母或符号组合"
            :border="false" />
        </u-form-item>
        <u-form-item label="确认密码" borderBottom>
          <u-input class="flex-1" type="password" v-model="formData.password_confirm" placeholder="再次输入新密码"
            :border="false" />
        </u-form-item>
      </u-form>
      <view class="mt-[100rpx]">
        <u-button type="primary" :customStyle="{
          height: '100rpx',

          background: `linear-gradient(90deg, #ffb5f7 0%, #ff5acf 99%)`,
          boxShadow: 'inset 0px 2px 10px 0px rgba(255, 255, 255, 0.4)'
        }" shape="circle" @click="handleConfirm"> 确认</u-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { smsSend } from '@/api/app'
import { forgotPassword } from '@/api/user'
import { SMSEnum } from '@/enums/appEnums'
import { reactive, ref, shallowRef } from 'vue'
import PageBg from "@/components/page-bg/page-bg.vue";
import { onPageScroll } from "@dcloudio/uni-app";


const navBg = ref<string>('#ffebfd')
const titleColor = ref<string>('#fff')

onPageScroll((event: any) => {
  navBg.value = event.scrollTop > 10 ? '#fff' : '#ffebfd'
  titleColor.value = event.scrollTop > 10 ? '#111' : '#fff'
})

const uCodeRef = shallowRef()
const codeTips = ref('')
const formData = reactive({
  mobile: '',
  code: '',
  password: '',
  password_confirm: ''
})

const codeChange = (text: string) => {
  codeTips.value = text
}

const sendSms = async () => {
  if (!formData.mobile) return
  if (uCodeRef.value?.canGetCode) {
    await smsSend({
      scene: SMSEnum.FIND_PASSWORD,
      mobile: formData.mobile
    })
    uni.$u.toast('发送成功')
    uCodeRef.value?.start()
  }
}

const handleConfirm = async () => {
  if (!formData.mobile) return uni.$u.toast('请输入手机号码')
  if (!formData.password) return uni.$u.toast('请输入密码')
  if (!formData.password_confirm) return uni.$u.toast('请输入确认密码')
  if (formData.password != formData.password_confirm) return uni.$u.toast('两次输入的密码不一致')
  await forgotPassword(formData)
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}
</script>

<style lang="scss">
page {
  height: 100%;
}

.register {
  background: #ffebfd;
}
</style>
